<!--
//
// Trigger.vue
// vue3-element-admin
//
// Created by 区区电脑 on 2023/04/10.
//
-->
<template>
    <div class="Index">
        <!-- 标题和筛选区 -->
        <table-search-bar :config="{}" :model="{}" hide-search title="菜单管理" />
        <!--  内容  -->
        <div class="container">
            <!-- 功能按钮 -->
            <div class="table-buttons">
                <el-button v-permission="permission.add" type="primary" @click="onDirectory('add')">
                    <b-icon name="bi-plus" size="20" />
                    添加
                </el-button>
            </div>
            <!--checkbox设置 :checkbox-config="{trigger: 'row', highlight: true}" -->
            <!--radio设置 :radio-config="{trigger: 'row', highlight: true}" -->
            <vxe-table ref="VXETable" :column-config="{ resizable: false}" :data="state.list" :loading="state.isLoading" :radio-config="{trigger: 'row', highlight: true}" :row-config="{isCurrent: true, isHover: true, keyField: 'id'}" :tree-config="{childrenField: 'children', reserve: true}" border round show-overflow size="small" @current-change="() => {}" @radio-change="() => {}">
                <template #empty>
                    <el-empty :image-size="100" />
                </template>

                <vxe-column fixed="left" title="#" type="seq" width="80" />
                <vxe-column :fixed="$fixedColumn('left')" field="name" min-width="200" title="名称" tree-node>
                    <template #default="{row}">
                        <b-icon v-if="row.icon" :name="row.icon" size="14" style="margin-right: 4px;color: #409EFF;" />
                        <div :class="{menuVisible: row.visible}" class="menu-name">
                            <!--                            <div class="menu-status"></div>-->
                            <span>{{ row.name }}</span>
                        </div>
                    </template>
                </vxe-column>
                <vxe-column align="center" field="type" title="类型" width="100">
                    <template #default="{row}">
                        <el-tag v-if="row.type===0" effect="dark" type="success">目录</el-tag>
                        <el-tag v-if="row.type===1" effect="dark" type="warning">页面</el-tag>
                        <el-tag v-if="row.type===2" effect="dark" type="danger">功能</el-tag>
                    </template>
                </vxe-column>
                <vxe-column field="code" title="编号" width="250">
                    <template #default="{row}">
                        <b-icon name="bi-clipboard-check" size="14" style="margin-right: 4px;color: #409EFF;cursor: pointer;" @click.stop="setCopy(row.code)" />
                        <span>{{ row.code }}</span>
                    </template>
                </vxe-column>
                <vxe-column align="center" field="openType" title="打开方式" width="100">
                    <template #default="{row}">
                        <template v-if="row.type===1">
                            <el-tag v-if="row.openType==='1'" effect="plain" type="success">组件</el-tag>
                            <el-tag v-if="row.openType==='2'" effect="plain" type="warning">内链</el-tag>
                            <el-tag v-if="row.openType==='3'" effect="plain" type="danger">外链</el-tag>
                        </template>
                    </template>
                </vxe-column>
                <vxe-column align="left" field="path" title="地址" width="280">
                    <template #default="{row}">
                        <template v-if="row.type===1">
                            <span v-if="row.openType==='1'">
                                <b-icon name="bi-clipboard-check" size="14" style="margin-right: 4px;color: #409EFF;cursor: pointer;" @click.stop="setCopy(row.path)" />
                                <span>{{ row.path }}</span>
                            </span>
                            <span v-if="row.openType==='2'">
                                <b-icon name="bi-clipboard-check" size="14" style="margin-right: 4px;color: #409EFF;cursor: pointer;" @click.stop="setCopy(row.link)" />
                                <span>{{ row.link }}</span>
                            </span>
                            <span v-if="row.openType==='3'">
                                <b-icon name="bi-clipboard-check" size="14" style="margin-right: 4px;color: #409EFF;cursor: pointer;" @click.stop="setCopy(row.link)" />
                                <span>{{ row.link }}</span>
                            </span>
                        </template>
                    </template>
                </vxe-column>
                <!--                <vxe-column align="center" field="isLockDataPermission" title="锁定数据权限" width="160">-->
                <!--                    <template #default="{row}">-->
                <!--                        <el-tag v-if="row.isLockDataPermission===1 && row.dataPermission===0">全部</el-tag>-->
                <!--                        <el-tag v-if="row.isLockDataPermission===1 && row.dataPermission===1" type="warning">组织(包含子组织)</el-tag>-->
                <!--                        <el-tag v-if="row.isLockDataPermission===1 && row.dataPermission===2" type="danger">组织(当前)</el-tag>-->
                <!--                        <el-tag v-if="row.isLockDataPermission===1 && row.dataPermission===3" type="danger">个人</el-tag>-->
                <!--                    </template>-->
                <!--                </vxe-column>-->
                <vxe-column field="permission" min-width="200" title="权限" />
                <vxe-column align="center" field="sort" title="排序" width="80" />
                <vxe-column :resizable="false" :width="$widthColumn(150)" field="action" fixed="right" title="操作">
                    <template #default="{row}">
<!--                        <table-action :actions="[-->
<!--                            {title: '修改', permission: permission.edit, type: 'primary', ok: editData},-->
<!--                            {title: '删除', permission: permission.delete, type: 'danger', ok: deleteData, confirm: '您确定要删除当前数据么?'},-->
<!--                            {title: '添加下级菜单', show: row.type < 2, permission: permission.add, type: 'primary', ok: addSubData, inMore: true},-->
<!--                        ]" :data="row" />-->
                        <table-action v-if="row.type === 0" :actions="[
                            {title: '修改', permission: permission.edit, type: 'primary', ok: () => onDirectory('edit', row)},
                            {title: '删除', permission: permission.delete, type: 'danger', ok: deleteData, confirm: '您确定要删除当前数据么?'},
                            {title: '添加目录', show: !row.pid, permission: permission.add, type: 'primary', ok: () => onDirectory('addSub', row), inMore: true},
                            {title: '添加页面', permission: permission.add, type: 'primary', ok: () => onPage('add', row), inMore: true},
                        ]" :data="row" />
                        <table-action v-if="row.type === 1" :actions="[
                            {title: '修改', permission: permission.edit, type: 'primary', ok: () => onPage('edit', row)},
                            {title: '删除', permission: permission.delete, type: 'danger', ok: deleteData, confirm: '您确定要删除当前数据么?'},
                            {title: '添加菜单权限', show: row.openType === '1', permission: permission.add, type: 'primary', ok: () => onButtonPermission('add', row), inMore: true},
                        ]" :data="row" />
                        <table-action v-if="row.type === 2" :actions="[
                            {title: '修改', permission: permission.edit, type: 'primary', ok: () => onButtonPermission('edit', row)},
                            {title: '删除', permission: permission.delete, type: 'danger', ok: deleteData, confirm: '您确定要删除当前数据么?'},
                        ]" :data="row" />
                    </template>
                </vxe-column>
            </vxe-table>
        </div>
    </div>
    <EditForm ref="editForm" />
    <Directory ref="directory" />
    <Page ref="page" />
    <ButtonPermission ref="buttonPermission" />
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import * as api from "./api.js";
import EditForm from "./EditForm.vue";
import Directory from "./Modal/Directory.vue"
import Page from "./Modal/Page.vue"
import ButtonPermission from "./Modal/ButtonPermission.vue"

const {$message, $fixedColumn, $widthColumn} = window;

// 路由
const router = useRouter();
// store
const store = useStore();
const userInfo = computed(() => store.getters.userInfo)

// 响应式数据
const state = reactive({
    // 表格刷新
    isLoading: false,
    // 表格数据源
    list: []
})
// 当前页面需要的功能权限
const permission = {
    add: "SysMenu:AddMenuInfo",
    delete: "SysMenu:DeleteMenuInfo",
    edit: "SysMenu:UpdateMenuInfo"
}

// 目录
const directory = ref()

/**
 * 添加或修改目录
 * @param action
 * @param row 添加目录的时候 row 为 null，修改目录的时候 row 为当前目录，添加子目录的时候 row 为父目录
 */
function onDirectory(action, row) {
    if (action === 'add') {
        let sort = 0;
        if (state.list && state.list.length > 0) {
            const array = state.list.sort((a, b) => b.sort - a.sort);
            sort = array[0].sort + 1
        }
        directory.value.show({
            title: "添加目录",
            options: {sort},
            ok() {
                loadList()
            }
        })
    }
    if (action === 'edit') {
        directory.value.show({
            title: "修改目录",
            options: {...row},
            ok() {
                loadList()
            }
        })
    }
    if (action === "addSub") {
        let sort = 0;
        if (row.children && row.children.length > 0) {
            const array = row.children.sort((a, b) => b.sort - a.sort);
            sort = array[0].sort + 1
        }
        directory.value.show({
            title: "添加目录",
            options: {pid: row.id, sort},
            ok() {
                loadList()
            }
        })
    }
}

const page = ref()

/**
 * 添加或修改页面
 * @param action
 * @param row 添加页面的时候 row 为上级目录，修改页面的时候 row 为当前页面
 */
function onPage(action, row) {
    if (action === 'add') {
        let sort = 0;
        if (row.children && row.children.length > 0) {
            const array = row.children.sort((a, b) => b.sort - a.sort);
            sort = array[0].sort + 1
        }
        page.value.show({
            title: "添加页面",
            options: {pid: row.id, sort},
            ok() {
                loadList()
            }
        })
    }
    if (action === 'edit') {
        page.value.show({
            title: "修改页面",
            options: {...row},
            ok() {
                loadList()
            }
        })
    }
}

const buttonPermission = ref()

/**
 * 添加和修改按钮权限
 * @param action
 * @param row 添加按钮权限的时候 row 为上级目录，修改按钮权限的时候 row 为当前按钮权限
 */
function onButtonPermission(action, row) {
    if (action === 'add') {
        let sort = 0;
        if (row.children && row.children.length > 0) {
            const array = row.children.sort((a, b) => b.sort - a.sort);
            sort = array[0].sort + 1
        }
        buttonPermission.value.show({
            title: "添加按钮",
            options: {pid: row.id, sort},
            ok() {
                loadList()
            }
        })
    }
    if (action === 'edit') {
        buttonPermission.value.show({
            title: "修改按钮",
            options: {...row},
            ok() {
                loadList()
            }
        })
    }
}



const editForm = ref();

// 添加
function addData() {
    let sort = 0;
    if (state.list && state.list.length > 0) {
        const array = state.list.sort((a, b) => b.sort - a.sort);
        sort = array[0].sort + 1
    }
    editForm.value.show({
        title: "添加",
        options: {sort},
        ok() {
            loadList()
        }
    })
}

// 删除
async function deleteData({id}) {
    const {success} = await api.DeleteMenuInfo({id});
    if (!success) return;
    $message.success("删除成功");
    loadList()
}

// 修改
function editData(row) {
    editForm.value.show({
        title: "修改",
        options: {...row},
        ok() {
            loadList()
        }
    })
}

// 添加子数据
function addSubData(row) {
    let sort = 0;
    if (row.children && row.children.length > 0) {
        const array = row.children.sort((a, b) => b.sort - a.sort);
        sort = array[0].sort + 1
    }
    editForm.value.show({
        title: "添加子数据",
        options: {type: row.type + 1, pid: row.id, openType: (row.type + 1) === 1 ? '1' : null, sort},
        ok() {
            loadList()
        }
    })
}

// 查询列表
async function loadList() {
    state.isLoading = true
    const {success, data} = await api.GetMenuTreeList();
    state.isLoading = false
    if (!success) return;
    state.list = data;
}

// 复制
function setCopy(text) {
    window.$copyText(text)
}


onMounted(() => {
    loadList()
})
</script>

<style lang="scss" scoped>
.Index {
    margin: 10px;
    width: calc(100% - 20px);
    box-sizing: border-box;

    .container {
        padding: 10px;
        background: #fff;
        margin-top: 10px;
        box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.1);

        .menu-name {
            display: inline-flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            color: var(--el-color-danger);
            font-size: 14px;

            .menu-status {
                display: inline-block;
                width: 6px;
                height: 6px;
                border-radius: 10px;
                border: 1px solid var(--el-color-danger);
                margin-right: 4px;
            }
        }

        .menuVisible {
            color: var(--el-color-primary);

            .menu-status {
                border: 1px solid var(--el-color-primary);
                background: var(--el-color-primary);
                animation: visible 0.8s ease infinite;
            }
        }

    }
}

@keyframes visible {
    0% {
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0)
    }
    50% {
        box-shadow: 0 0 4px 0 var(--el-color-primary)
    }
    100% {
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0)
    }
}
</style>
